<template>
  <div>
    <div>
      <div style="padding: 20px 0; border-bottom: 1px dashed #ccc;">
        <div style="display: flex; width: 100%">
          <div style="padding: 5px; font-size: 20px; color: #3F5EFB; cursor: pointer">{{article.name}}</div>
          <div style="text-align: right; flex: 1">
            <el-button v-if="!this.concern" type="primary"  @click="handleChangeConcern(article.userId)">关注作者</el-button>
            <el-button v-else type="danger"  @click="handleChangeConcern(article.userId)">已关注作者</el-button>
          </div>
        </div>

        <div style="padding: 5px; font-size: 12px;display: flex">
          <div style="display: inline-block; width: 80px"><i class="el-icon-user-solid"></i><span>{{article.user}}</span></div>
          <i class="el-icon-time" style="margin-left: 5px;"></i><span>{{ new Date(article.createTime).toLocaleDateString() }}</span>
          <div style="flex: 1; text-align: right; display: flex">
            <div style="flex: 1">
              <div v-if="userLike === false">
                <el-button type="text" @click="handleLike">
                  <svg t="1678631862287" class="icon" style="width: 18px; height: 18px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15859" width="200" height="200"><path d="M245.957216 473.939081H90.858285A90.858285 90.858285 0 0 0 0 564.797365v368.295978A90.858285 90.858285 0 0 0 90.858285 1023.951628h95.465184V473.939081M914.213503 380.777346h-332.72048c17.915718-52.979338 26.873577-195.281328 26.873577-234.951846C609.134417 72.371055 540.030933 0.196305 469.903693 0.196305a117.219984 117.219984 0 0 0-13.564758 0C435.096012 4.035388 360.873751 21.695167 360.873751 125.862271v64.496585c0 80.108854-31.736415 258.24228-114.916535 283.580225h3.839083V1023.951628H826.682423a107.494309 107.494309 0 0 0 107.494309-81.388549l87.787019-443.286054a89.83453 89.83453 0 0 0 1.791571-18.427596 105.446798 105.446798 0 0 0-109.541819-100.072083z" p-id="15860" fill="#bfbfbf"></path></svg>
                </el-button>
                <span style="margin-left: 15px; font-size: 18px">{{article.like}}</span>
              </div>
              <div v-else style="text-align: right; flex: 1;">
                <el-button type="text" @click="handleLike">
                  <svg t="1678631862287" class="icon" style="width: 18px; height: 18px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15859" width="200" height="200"><path d="M245.957216 473.939081H90.858285A90.858285 90.858285 0 0 0 0 564.797365v368.295978A90.858285 90.858285 0 0 0 90.858285 1023.951628h95.465184V473.939081M914.213503 380.777346h-332.72048c17.915718-52.979338 26.873577-195.281328 26.873577-234.951846C609.134417 72.371055 540.030933 0.196305 469.903693 0.196305a117.219984 117.219984 0 0 0-13.564758 0C435.096012 4.035388 360.873751 21.695167 360.873751 125.862271v64.496585c0 80.108854-31.736415 258.24228-114.916535 283.580225h3.839083V1023.951628H826.682423a107.494309 107.494309 0 0 0 107.494309-81.388549l87.787019-443.286054a89.83453 89.83453 0 0 0 1.791571-18.427596 105.446798 105.446798 0 0 0-109.541819-100.072083z" p-id="15860" fill="#1296db"></path></svg>
                </el-button>
                <span style="margin-left: 15px; font-size: 18px">{{article.like}}</span>
              </div>
            </div>
            <div style="margin-left: 20px">
              <div v-if="userCollect === false">
                <el-button type="text" @click="handleCollect">
                  <svg t="1678870280852" class="icon" style="width: 22px; height: 22px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3924" width="200" height="200"><path d="M284.458667 941.397333c-36.437333 15.637333-68.48-7.68-64.896-47.168l22.613333-248.917333-164.394667-188.053333c-26.069333-29.824-13.653333-67.562667 24.789334-76.309334l243.370666-55.381333 127.786667-214.677333c20.288-34.090667 59.946667-34.069333 80.213333 0l127.786667 214.677333 243.370667 55.381333c38.656 8.789333 50.858667 46.485333 24.789333 76.309334l-164.394667 188.053333 22.741334 249.002667c3.605333 39.509333-28.458667 62.805333-64.896 47.146666l-229.504-98.517333-229.376 98.453333z" fill="#bfbfbf" p-id="3925"></path></svg>
                </el-button>
                <span style="margin-left: 14px; font-size: 18px">{{article.collect}}</span>
              </div>
              <div v-else style="text-align: right; flex: 1;">
                <el-button type="text" @click="handleCollect">
                  <svg t="1678870280852" class="icon" style="width: 22px; height: 22px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3924" width="200" height="200"><path d="M284.458667 941.397333c-36.437333 15.637333-68.48-7.68-64.896-47.168l22.613333-248.917333-164.394667-188.053333c-26.069333-29.824-13.653333-67.562667 24.789334-76.309334l243.370666-55.381333 127.786667-214.677333c20.288-34.090667 59.946667-34.069333 80.213333 0l127.786667 214.677333 243.370667 55.381333c38.656 8.789333 50.858667 46.485333 24.789333 76.309334l-164.394667 188.053333 22.741334 249.002667c3.605333 39.509333-28.458667 62.805333-64.896 47.146666l-229.504-98.517333-229.376 98.453333z" fill="#1296db" p-id="3925"></path></svg>
                </el-button>
                <span style="margin-left: 14px; font-size: 18px">{{article.collect}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div  style="margin: 20px 0;">
      <mavon-editor
          class="md"
          :value="article.content"
          :subfield="false"
          :defaultOpen="'preview'"
          :toolbarsFlag="false"
          :editable="false"
          :scrollStyle="true"
          :ishljs="true"
          style="z-index: 0"
      />
    </div>

    <div style="margin: 30px 0">
      <div style="margin: 10px 0">
        <div style="border-bottom: 1px solid #F56C6C; padding: 10px 0">评论</div>
        <div style="padding: 10px 0">
          <el-input type="textarea" v-model="commentForm.content"></el-input>
        </div>
        <div  style="padding: 10px; text-align: right">
          <el-button type="primary" size="small" @click="save">评论</el-button>
        </div>
      </div>

      <div style="margin: 10px 0">
        <div v-for="item in comments" :key="item.id" style="border-bottom: 2px solid #ccc; margin-top: 16px">
          <div style="display: flex">
            <!--          头像-->
            <div style="width: 100px; text-align: center" @click="$router.push('/front/user?id=' + item.userId)">
              <el-image :src="item.avatarUrl" style="width: 50px; height: 50px; border-radius: 50%"></el-image>
            </div>
            <!--          内容-->
            <div style="flex: 1; font-size: 14px; padding: 10px 0; line-height: 24px">
              <b>{{item.nickname}}: </b>
              <span>{{item.content}}</span>
              <div  style="display: flex">
                <div style="width: 200px; line-height: 20px; margin-top: 16px">
                  <i class="el-icon-time" style="margin-right: 8px"></i><span>{{ item.time }}</span>
                </div>
                <div style="text-align: right; flex: 1;">
                  <el-button style="margin-left: 5px; " type="text" @click="handleReply(item.id, item.nickname)">回复</el-button>
                  <el-popconfirm title="确认删除吗?" @confirm="handleDelete(item.id)">
                    <template #reference>
                      <el-button size="small" v-if="item.userId === user.id" type="text"
                                 style="margin-left: 8px; color: #F56C6C">删除</el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </div>
<!--          回复-->
          <div v-if="item.children.length" v-for="subItem in item.children" :key="subItem.id" style="margin-left: 90px;padding-left: 20px;  border-top: 1px solid #ccc;">
            <div style="display: flex; font-size: 14px; padding: 10px 0;">
<!--              头像-->
              <div style="width: 50px; text-align: center" @click="$router.push('/front/user?id=' + subItem.userId)" >
                <el-image :src="subItem.avatarUrl" style="width: 30px; height: 30px; border-radius: 50%"></el-image>
              </div>
<!--              内容-->
              <div style="flex: 1; line-height: 24px">
                <b v-if="subItem.nickname">{{subItem.nickname}}: </b>
                <b v-else>用户已注销: </b>
                <span v-if="subItem.pnickname" style="color: #3F5EFB; margin-right: 10px">@{{subItem.pnickname}}</span>
                <span v-else style="color: #3F5EFB; margin-right: 10px">@用户已注销</span>
                <span>{{subItem.content}}</span>
                <div  style="display: flex">
                  <div style="width: 200px; line-height: 20px; margin-top: 16px">
                    <i class="el-icon-time" style="margin-right: 8px"></i><span>{{ subItem.time }}</span>
                  </div>
                  <div style="text-align: right; flex: 1;">
                    <el-button style="margin-left: 5px; " type="text" @click="handleReply2(subItem.id, subItem.orginId, subItem.nickname)">回复</el-button>
                    <el-popconfirm title="确认删除吗?" @confirm="handleDelete(subItem.id)">
                      <template #reference>
                        <el-button size="small" v-if="subItem.userId === user.id" type="text"
                                   style="margin-left: 8px; color: #F56C6C">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>


          </div>
        </div>
      </div>
    </div>


    <el-dialog :title="'回复: @'+ replyNickname" :visible.sync="dialogCommentVisible" width="60%">
      <el-form :model="commentForm" label-width="80px" >
        <el-form-item label="回复内容">
          <el-input type="textarea" v-model="commentForm.contentReply"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCommentVisible = false; commentForm = {}">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加收藏夹" :visible.sync="dialogCollectVisible" width="350px">
<!--      <el-checkbox-group-->
<!--          v-model="collectIds">-->
<!--        <el-checkbox v-for="item in userCollects" :key="item.id" :label="item.id" style="width: 320px; line-height: 30px">{{item.collectName}}</el-checkbox>-->
<!--        <el-checkbox v-if="userCollects.length === 0" key="0" lable="默认收藏夹">默认收藏夹</el-checkbox>-->
<!--      </el-checkbox-group>-->
      <el-tree
          :data="userCollects"
          :props="props"
          show-checkbox
          :check-strictly="true"
          node-key="id"
          ref="tree"
          :default-expanded-keys="expends"
          :default-checked-keys="checks">
        <span class="custom-tree-node" slot-scope="{node, data}">
          <span><i :class="data.collectName"></i>{{ data.collectName }} </span>
        </span>
      </el-tree>

      <el-input
          placeholder="请输入新的收藏夹"
          v-model="newCollect"
          clearable>
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCollectVisible = false;">取 消</el-button>
        <el-button type="primary" @click="saveCollect">确 定</el-button>
      </div>

    </el-dialog>


  </div>
</template>

<style>


</style>

<script>

import {resetRouter} from "@/router";

export default {
  name: "FrontArticleDetail",
  data() {
    return {
      article: {},
      comments: [],
      commentForm: {},
      dialogCommentVisible: false,
      replyNickname: '',
      userLike: false,
      userCollect: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      id: this.$route.query.id ? this.$route.query.id : 0,
      userCollects: [],
      dialogCollectVisible: false,
      props: {
        label: 'name',
      },
      expends: [],
      checks: [],
      orChecks: [],
      newCollect: '',
      concern: false,
    }
  },
  created() {
    this.load();
    this.loadComments();
    this.loadLike();
    this.loadCollect();
    this.loadConcern()
  },
  methods: {
    handleChangeConcern(userId) {
      if (this.concern) {
        this.request.delete("concern/delete/" + userId).then(res => {
          if (res.code != '200') {
            this.$message = res.msg
          }else {
            this.concern = false
          }
        })
      } else {
        this.request.post("/concern", {
          "myId" : this.user.id,
          "concernId" : userId
        }).then(res => {
          if (res.code === '200') {
            this.concern = res.data
            this.concern = true
          }
        })
      }
      // this.loadConcern()
    },
    loadConcern() {
      this.request.get("/concern/isConcern/" + this.id).then(res => {
        // console.log(res)
        this.concern = res.data
      })
    },
    loadCollect() {
      this.request.get("collect/isUserCollect/" + this.id).then(res => {
        if (res.code === '200') {
          this.userCollect = res.data
        }
      })
      // this.
    },

    saveCollect() {
      if (this.newCollect != '') {
        // console.log(this.newCollect)
        this.request.post("/collect/new?articleId="+ this.id + "&collectName="+ this.newCollect).then(res =>{
          console.log(res)
          if (res.code === '200') {
            this.$message.success("收藏成功")
            this.dialogCollectVisible = false
            this.loadCollect()
            this.load()
          }
        })
        return
      }
      if (this.checks) {
        console.log(this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()))
        this.request.post("collect/aC/" + this.id, this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())).then(res => {
          if (res.code === '200') {
            this.$message.success(res.msg)
            this.checks = res.data
            this.dialogCollectVisible = false
            this.loadCollect()
          } else {
            this.$message.error(res.data)
          }
          // console.log(res)
          this.load()
        })
      }

    },

    // 请求查询文章数据
    load(){
      this.request.get("/article/" + this.id).then(res =>{
        this.article = res.data
      })
    },
    // 请求查询评论数据
    loadComments() {
      this.request.get("/comment/tree/" + this.id).then(res =>{
        this.comments = res.data
        // console.log(this.comments)
        // console.log(this.user)
      })
    },
    loadLike() {
      // this.request.get("/like/userLike", {
      //   "type": "article",
      //   "userId": this.user.id,
      //   "likeId": this.id
      // }).then(res =>{
      //   if (res.code === 200) {
      //     this.userLike = res.data
      //   }
      // })
      this.request.get("/like/userLike/" ,{
        params: {
          type: 'article',
          userId: this.user.id,
          likeId: this.id
        }
      }).then(res => {
        if (res.code === '200'){
          this.userLike = res.data
        }
      })
    },
    // 保存
    save() {
      if (!this.user.id) {
        this.$message.error("请先登录后操作")
        this.dialogCommentVisible = false
        return
      }
      this.commentForm.articleId = this.id
      if (this.commentForm.contentReply) {
        this.commentForm.content = this.commentForm.contentReply
      }
      this.request.post("/comment", this.commentForm).then(res =>{
        if(res.data) {
          this.$message.success("评论成功")
          this.commentForm = {}
          this.loadComments()
        } else {
          this.$message.error(res.msg)
        }
      })
      this.dialogCommentVisible = false
      this.form = {};
    },
    // 删除
    handleDelete(id){
      this.request.delete("/comment/" + id).then(res => {
        if (res.data) {
          this.$message.success("删除成功")
        } else {
          this.$message.error("删除失败")
        }
        this.loadComments()
      })
    },
    handleReply(pid, nickname) {
      this.commentForm = {}
      this.dialogCommentVisible = true
      this.commentForm = {pid : pid, orginId: pid}
      this.replyNickname = nickname
    },
    handleReply2(pid, orginId, nickname) {
      this.commentForm = {}
      this.dialogCommentVisible = true
      this.commentForm = {pid : pid, orginId: orginId}
      this.replyNickname = nickname
    },
    handleLike() {
      this.request.post("/like/" ,{
          "type": "article",
          "userId": this.user.id,
          "likeId": this.id,
      }).then(res => {
        if (res.code === '200'){
          this.load();
          this.userLike = res.data
        }
      })
    },
    handleCollect() {
      this.dialogCollectVisible =true
      this.newCollect= ''
      if (!this.user) {
        this.$message.error("请登录后操作")
        return
      }
      this.request.get("/collect/user").then(res => {
        console.log(res)
        this.userCollects = res.data
        this.expends = this.userCollects.map(v => v.id)
        console.log(this.userCollects)
      })
      // 获取点击
      this.request.get("/collect/articleInC/" + this.id).then(res => {
        this.checks = res.data
        console.log(this.checks)
      })
    },

  }
}
</script>